<template>
    <div :hasReadText="hasReadText">
        <div class="cover" v-if="showCover" @click="close"></div>
        <transition name="scale">
          <div id="agreement" v-if="showAg">
            <button class="close">
              <img src="../common/imgs/cha.png" @click="close" alt="">
            </button>
            <div class="width100 height100 html" id="html" v-html="text"></div>
            <p class="hasRead">
              <span class="hoverhand" @click="callback">{{textb}}</span>
            </p>
          </div>
        </transition>
    </div>
</template>

<script>
  //import AgreeMent from '../../components/AgreeMent';
  //<agree-ment ref="ag" hasReadText="我已阅读并同意此协议" @isRead="function(){}"></agree-ment>
  //@isRead="function(){}"  点击弹窗下方的“已阅读” 执行函数
  //this.$refs.ag.agreement('协议内容');添加协议内容

    export default {
        name: "AgreeMent",
        data(){
            return{
                introduce:'协议弹窗',
                showCover:false,
                showAg:false,
                text:'',
                textb:'已阅读'
            }
        },
        props: {
            'hasReadText': {
                /*已阅读文字*/
                type: String,
                default: ''
            },
        },
        mounted(){
            this.textb = this.hasReadText ? this.hasReadText : '已阅读';
        },
        methods:{
            callback(){
                this.$emit('isRead');
                this.close();
            },
            agreement( agreementInfo ){
                /*协议信息*/
                if( agreementInfo ){
                    this.showCover = true;
                    this.text =  agreementInfo ;
                    this.textb = this.hasReadText;
                    this.showAg = true;
                    // this.noScroll();
                }
            },
            close(){
                this.showAg = false;
                // this.canScroll();
                let thiz = this;
                var timeout = setTimeout(function () {
                  clearTimeout(timeout);
                  timeout = null;
                  thiz.showCover = false;
                },200)

            }
        }
    }
</script>

<style type="text/less" lang="less" scoped>
  #agreement{
    text-align: left;font-size: 0.28rem!important;position: fixed;z-index: 6;padding:0.3rem;width: 80%;left: 10%;
    height: 80%;top:10%;background: #fff;overflow: hidden;border-radius: 0.06rem;padding-right: 0.15rem;padding-left: 0.15rem;
  }
  @media screen and (min-width: 1025px){
    #agreement{width: 462px;left: 50%;margin-left: -231px;}
  }
  .close{
    background: none;padding:0.35rem;position: absolute;z-index: 1;right: 0rem;top:0;
    img{
      width: 0.38rem;height: 0.38rem;
    }
  }
  .hasRead{
    color: #FFD203;font-size: 0.32rem;text-align: center;position: absolute;z-index: 1;bottom: 0;width: 100%;left: 0;
    >span{
      line-height: 1rem;padding: 0 0.3rem;display: inline-block;height: 1rem;
    }
  }
  #agreement>div{
    overflow-x: hidden;overflow-y: scroll;word-wrap:break-word;height: calc( 100% - 1.5rem );width: calc( 100% - 0rem );
    margin: 0 auto;margin-top: 0.8rem;padding:.15rem;line-height: 170%;font-size: 0.28rem;
  }
  #html /deep/ *{
    margin: initial!important;
    padding: inherit!important;
    line-height: inherit!important;
  }
  #agreement>div::-webkit-scrollbar {width:2px; height:10px;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  #agreement>div::-webkit-scrollbar-track {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);} /*定义滚动条轨道 内阴影+圆角*/
  #agreement>div::-webkit-scrollbar-thumb {background-color: #ffa205; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.2);} /*定义滑块 内阴影+圆角*/

  /*动画*/
  #agreement{
    -webkit-transition: all 0.2s ease-in;transition: all 0.2s ease-in;
  }
  @media screen and (min-width: 1025px) {
    .window{width:  424px;left: 50%;margin-left:-212px;}
  }
</style>
